// 1. 下载包  yarn add react-redux @reduxjs/toolkit
// 2. 创建slice对象

// createAsyncThunk 是帮我们在redux中执行异步的函数
import { createSlice, configureStore, createAsyncThunk } from '@reduxjs/toolkit'

// 创建异步对象
const asyncCount = createAsyncThunk('zzz', () => {
  // 这个回调函数中,要求必须返回一个promise实例
  return new Promise<number>((resolve, reject) => {
    setTimeout(() => {
      // 异步成功之后,要加3
      resolve(3)
      //   reject('fail')
    }, 1000)
  })
})

// slice中集成了reducer和actionCreator
// 这是Count组件对应的slice
const xxxSlice = createSlice({
  name: 'xxx', //这是slice的名字 //在action对象中用来区分到底要改的是哪个slice的数据
  initialState: { count: 0, msg: '123', loading: false }, // 配置初始值
  reducers: {
    // reducers中定义的是函数,这个函数即被用来生成reducer,又被用来生成actionCreator
    add(state, action) {
      // action 就是action对象
      // state 是我们的数据,但是注意: 这个state不是真正的redux数据,而是代理数据. redux的数据是不允许直接修改的.但是这个state是代理,允许直接修改. 修改了代理数据,redux数据也会跟着变化
      //   console.log(state, action)
      //   console.log(state.count)
      state.count = state.count + 1
    },
    sub(state, action) {
      // 如果action对象要传入一些额外的参数,则建议使用payload
      state.count = state.count - action.payload
    },
  },
  // 当前slice时中和异步相关的代码
  extraReducers(builder) {
    //  当异步开始的时候,回调触发. asyncCount相当于就是上面异步代码返回的promise实例
    builder.addCase(asyncCount.pending, (state, action) => {
      //   console.log('正在异步操作', state, action)
      state.loading = true
    })
    // 当异步成功的时候,回调触发
    builder.addCase(asyncCount.fulfilled, (state, action) => {
      //   console.log('成功', state, action)
      state.count = state.count + action.payload
      state.loading = false
    })
    // 当异步失败的时候,回调触发
    builder.addCase(asyncCount.rejected, (state, action) => {
      console.log('失败', state, action)
      state.loading = false
    })
  },
})

// List组件对应的slice
const listSlice = createSlice({
  name: 'yyy',
  initialState: {
    lis: ['a', 'b', 'c'],
  },
  reducers: {
    insert(state, action) {
      // 根据旧数据,创建新数据
      const newList = [...state.lis]
      newList.push(action.payload)
      state.lis = newList
    },
  },
})
// 3. 创建store对象
const store = configureStore({
  // 有合并reducer的作用
  reducer: {
    // test的作用相当于就是原来合并reducer的键
    test: xxxSlice.reducer, //slice对象中包含了帮我们创建出来的reducer函数
    list: listSlice.reducer,
  },
})

// 将slice自动生成的actionCreator结构出来并导出
export const { add, sub } = xxxSlice.actions
export const { insert } = listSlice.actions
// 将异步的asyncCount导出,这个asyncCount相当于也是一个异步的actionCreator
export { asyncCount }

// console.log(add())
// console.log(sub())

export default store

// store.subscribe(() => {
//   console.log(store.getState())
// })

// store.dispatch({ type: 'xxx/add' })
